<template>
  <div>
    <!-- <div class="bg-white grid-content">
      <el-form :inline="true" class="demo-form-inline">
        <el-date-picker
          style="top: 15px"
          v-model="searchDate"
          type="month"
          value-format="yyyy-MM"
          placeholder="选择月"
          align="right"
          unlink-panels>
        </el-date-picker>
        <el-form-item>
          <el-button type="primary" @click="formSearch()">查询</el-button>
          <el-button type="success" @click="download()">下载</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="bg-white grid-content">
      <div style="overflow: hidden; ">
        <div class="mytitle"><svg-icon icon-class="Cyjsbda" class="myIcon" />干气日报</div>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%" :header-cell-style="{background:'#F5F7FA',color:'#909399'}">
        <el-table-column type="index" label="序号" :index="indexMethod">
        </el-table-column>
        <el-table-column label="日期" align="center" prop="rq">
        </el-table-column>

        <el-table-column label="各单位日用气量" align="center">
          <el-table-column align="center" label="第一采油作业区">
            <el-table-column align="center" prop="syz" label="实验站">
            </el-table-column>
            <el-table-column align="center" prop="d12zyz" label="东12转油站">
            </el-table-column>
            <el-table-column align="center" prop="s12zyz" label="尚12转油站">
            </el-table-column>
            <el-table-column align="center" prop="hj1" label="合计">
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" label="第二采油作业区">
            <el-table-column align="center" prop="d16zyz" label="东16转油站">
            </el-table-column>
            <el-table-column align="center" prop="s382zyz" label="树382转油站">
            </el-table-column>
            <el-table-column align="center" prop="d14zyz" label="东14转油站">
            </el-table-column>
            <el-table-column align="center" prop="d18zyz" label="东18转油站">
            </el-table-column>
            <el-table-column align="center" prop="hj2" label="合计">
            </el-table-column>
          </el-table-column>



          <el-table-column align="center" label="第三采油作业区">
            <el-table-column align="center" prop="s2zyz" label="树2转油站">
            </el-table-column>
            <el-table-column align="center" prop="s8zyz" label="树8转油站">
            </el-table-column>
            <el-table-column align="center" prop="s8zyz" label="树16转油站">
            </el-table-column>
            <el-table-column align="center" prop="s101zqz" label="树101注气站">
            </el-table-column>
            <el-table-column align="center" prop="hj3" label="合计">
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" label="第四采油作业区">
            <el-table-column align="center" prop="s127zyz" label="树127转油站">
            </el-table-column>
            <el-table-column align="center" prop="x6zyz" label="徐6转油站">
            </el-table-column>
            <el-table-column align="center" prop="yellhz" label="榆二联合站">
            </el-table-column>
            <el-table-column align="center" prop="zjjrz" label="中间加热站">
            </el-table-column>
            <el-table-column align="center" prop="hj4" label="合计">
            </el-table-column>
          </el-table-column>


          <el-table-column align="center" prop="zzs22z" label="肇洲升22站">
          </el-table-column>
          <el-table-column align="center" prop="cqglf" label="厂区锅炉房">
          </el-table-column>
          <el-table-column align="center" prop="zyql" label="总用气量">
          </el-table-column>
        </el-table-column>


        <el-table-column align="center" label="徐深一">
          <el-table-column align="center" prop="xsyzql" label="总气量">
          </el-table-column>
          <el-table-column align="center" prop="xsyqlcz" label="气量差值">
          </el-table-column>
        </el-table-column>

        <el-table-column align="center" label="肇州肇25站" prop="zzz25z">
        </el-table-column>
      </el-table>
    </div>

    <!-- 弹出框 -->
  </div>
</template>

<script>
import CyjsbdaApi from '@/api/sjtb/scgl/cyjsbda';
import Bolb from '@/vendor/Blob';
import Export2Excel from '@/vendor/Export2Excel'
import kgjApi from "@/api/jcsj/scgl/jsj/kgj";
export default {
  data() {
    return {
      searchDate: null,
      pageNo: 1, //当前页码
      pageSize: 10, //每页显示数量
      total: 0, //总数量
      tableData:[],
      startDate:'',
      endDate:'',
      // table数据

      //当前页码
      currentPage: 1,
      //时间快捷选择
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      value1:'',
      //获取当前日期
      currentTime:'',
      //编辑框是否显示
      dialogFormVisible: false,
      //弹出框是否是查看
      ischeck: false,
      //控制查看时不可更改数据
      isInput:false,
      //弹出框标题
      myDialogTitle: '',
    }
  },
  created(){
    const now = new Date();
    const year = now.getFullYear(); // 年
    const month = now.getMonth() + 1; // 月
    this.search(year, month);
  },
  mounted(){
    this.filterTime();
    // this.initDate();
  },
  methods: {
    //条件查询
    formSearch() {
      var listrq=this.searchDate.split('-')
      var year=parseInt(listrq[0])
      var month=parseInt(listrq[1])
      this.search(year,month)
    },
    /**
     * 查询列表
     */
    async search(year,month) {
      // this.pageNo = pageNo; //当前页码
      // this.pageSize = pageSize; //每页显示数量
      //发送查询请求
      let res = await kgjApi.getGqrb({year:year,month:month});
      //判断是否成功
      if(res.success){
        //赋值
        this.tableData = res.data;
        //总数量
        this.total = res.data.total;
      }
    },

    exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/vendor/Export2Excel');//此处把路径要写对
        //复杂表头书写
        //添加表格id
        var myindex = [];
        for (var i = 0; i < this.total; i++) {
          myindex[i] = i + 1
        }
        var newindex = myindex.map(item => {
          console.log(item)
          return {
            index: item
          }
        });
        // //将添加的序号加入到表格中形成新的mergeArr表格
        let mergeArr = [newindex, this.tableData].reduce((prev, curr) => {
          return prev.map((item, index) => {
            return Object.assign(item, curr[index]);
          });
        });
        console.log('mergeArr', mergeArr);
        console.log('tableData', this.tableData);

        // const tHeader = ['日期', '姓名', '地址'];
        // // 上面设置Excel的表格第一行的标题
        //一级表头
        const multiHeader = [['抽油机设备档案','','','','','','','','','','','','']];
        //二级表头
        const header = ['序号',  '单位名称', '抽油机名称', '保养记录号','保养期次', '开始保养时间', '完成时间', '与上次保养间隔时间', '保养工时', '保养主要内容数据 （包括更换主要配件及试车结果', '保养负责人', '验收人', '备注'];
        //表头字段
        const filterVal = ['index', 'orgName', 'jackName', 'jlid','maintenancePeriod', 'ksrq', 'wcrq', 'jgsj', 'bygs', 'zyxlnr', 'byfzr', 'ysr', 'bz'];
        //需要合并的单元格
        const merges = ['A1:M1', ];
        //表头样式
        let headerStyle = ['A1','B1','C1','D1','E1','F1','G1','H1','I1','J1','K1','L1','M1'];
        // 上面的index、nickName、name是tableData里对象的属性
        console.log(this.tableData);
        // const list = this.tableData;  //把data里的tableData存到list
        // const data = this.formatJson(filterVal, list);
        const list = mergeArr;
        const data = this.formatJson(filterVal, list);
        console.log(111111);
        console.log(list);
        console.log(data);

        export_json_to_excel({
          //header: tHeader,
          multiHeader:multiHeader,
          header:header,
          merges:merges,
          headerStyle:headerStyle  ,
          data: data,
          filename: '抽油机设备档案',
          autoWidth: true,
          bookType: 'xlsx'
        });//"列表excel"  是下载后的表名 可修改
        this.$message.success('导出报表成功！')
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => {
        return filterVal.map(j => v[j])
      })
    },

    // //每页条数改变时触发 选择一页显示多少行
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    //   this.currentPage = 1;
    //   this.pageSize = val;
    // },
    // //当前页改变时触发 跳转其他页
    // handleCurrentChange(val) {
    //   console.log(`当前页: ${val}`);
    //   this.currentPage = val;
    // },
    /*** 当每页数量发生变化时触发该事件 */
    handleSizeChange(size) {
      console.log(size);
      this.pageSize = size;
      //将每页显示的数量交给成员变量
      this.search(this.pageNo, size);
    },
    /*** 当页码发生变化时触发该事件 */
    handleCurrentChange(page) {
      console.log(page);
      this.pageNo = page;
      //调用查询方法
      this.search(page, this.pageSize);
    },
    // 序号计算
    indexMethod (index) {
      // index默认在0开始，这里+1
      return index + 1 + (this.pageNo - 1) * this.pageSize
    },
    // 获取当前日期
    filterTime() {
      var date = new Date();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? '0' + m : m;
      var d = date.getDate();
      d = d < 10 ? '0' + d : d;
      this.currentTime = y + '-' + m + '-' + d;
    },
    //日期查询点击事件
    reload(){
      this.tableData=[];

      console.log(1010);
      console.log(this.value1[0]);//value1[0] 开始时间 value1[1] 结束时间
      this.startDate = this.value1[0];
      this.endDate = this.value1[1];
      this.search();
      //  console.log(this.value1[0]);
      //this.$refs.table.reload({ page: 1 });

    },
  }
}
</script>

<style lang="scss" scoped>
// 标题
.mytitle {
  font-size: large;
  padding-left: 10px;
  margin-bottom: 16px;
  float: left;
}

//按钮组
.myButtons {
  float: right
}

//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
  display: none;
}

.calendar ::v-deep .el-button-group::after {
  display: none;
}

// 分割线样式
.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
  margin: 15px 10px 15px 10px;
}

//表单禁用字体样式
.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
}
//对话框宽度
// .customWidth{
//         width:80%;
//     }
::v-deep .saveAsDialog {
  width: 60% !important;
}
</style>
